<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>参考链接：https://www.cnblogs.com/coco1s/p/15845585.html</title>
</head>
<style>
  html,
  body {
    position: relative;
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #fff;
    padding: 0;
    margin: 0;
  }

  body::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(150px);
    z-index: 1;
  }

  p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #000;
    z-index: 10;
    cursor: pointer;
  }
</style>

<body>
  <p>Click Me</p>
  <css-doodle>
    :doodle {
    @grid: 1x8 / 100vmin;
    }
    @place-cell: center;
    width: @rand(40vmin, 80vmin);
    height: @rand(40vmin, 80vmin);
    transform: translate(@rand(-200%, 200%), @rand(-60%, 60%)) scale(@rand(.8, 1.8)) skew(@rand(45deg));
    clip-path: polygon(
    @r(0, 30%) @r(0, 50%),
    @r(30%, 60%) @r(0%, 30%),
    @r(60%, 100%) @r(0%, 50%),
    @r(60%, 100%) @r(50%, 100%),
    @r(30%, 60%) @r(60%, 100%),
    @r(0, 30%) @r(60%, 100%)
    );
    background: @pick(#f44336, #e91e63, #9c27b0, #673ab7, #3f51b5, #60569e, #e6437d, #ebbf4d, #00bcd4, #03a9f4, #2196f3, #009688, #5ee463, #f8e645, #ffc107, #ff5722, #43f8bf);
    opacity: @rand(.3, .8);
    position: relative;
    top: @rand(-80%, 80%);
    left: @rand(-80%, 80%);
    animation: colorChange @rand(6.1s, 16.1s) infinite @rand(-.5s, -2.5s) linear alternate;
    @keyframes colorChange {
    100% {
    left: 0;
    top: 0;
    filter: hue-rotate(360deg);
    }
    }
  </css-doodle>
</body>
<script src="https://unpkg.com/css-doodle@0.29.0/css-doodle.min.js"></script>
<script>
  const doodle = document.querySelector('css-doodle');

  document.addEventListener('click', function(e) {
    doodle.update();
  });
</script>

</html>